<template>
  <el-select
    placeholder="请选择"
    v-model="selectValue"
    :disabled="disabled"
    filterable
    collapse-tags
    collapse-tags-tooltip
    :clearable="clearable"
    :filter-method="handleQuerySearch"
    @change="handleQueryChange"
    @visible-change="visibleList"
    :multiple="multiple"
  >
    <el-option
      v-for="item in selectOptions"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
    <VabElSelectLoading
      :page="page"
      :loading="loading"
      :hasMore="hasMore"
      @loadMore="handleLoadMore"
    />
  </el-select>
</template>

<script setup lang="ts">

/**
 * @import
 */
import _ from "lodash";
import { ref } from "vue";
import { customerPriceProductSelect } from "/@/api/dms/customer";

/**
 * @props
 */
const props = defineProps({
  value: {
    type: String,
    default: ''
  },
  type: {
    type: String,
    default: '', // number, name, barcode
  },
  // 价目表id
  priceId: {
    type: String,
    default: '',
  },
  //品牌
  brandName: {
    type: Array,
    default: [],
  },
  multiple: {
    type: Boolean,
    default: false
  },
  clearable: {
    type: Boolean,
    default: true
  },
  disabled: {
    type: Boolean,
    default: false
  }

})

/**
 * @var
 */

const proxy: any = getCurrentInstance()?.proxy

const page = ref(0);
const loading = ref(false);
const hasMore = ref(true);

const selectValue = ref<any>();
const sreachValue = ref<any>('')
const selectOptions = ref<any[]>([]);


const emit = defineEmits(['LazyChange'])

/**
 * 加载数据列表
 */

const loadDataList = _.debounce(async () => {

  if (!props.priceId) {
    proxy.$Message('请选择价目表后，再进行操作！', 'warning')
    return
  }

  try {
    loading.value = true;

    // 参数
    let data = {
      page: page.value,
      limit: 50,
      id: props.priceId || '',
      filter: {
        name: (props.type == '' || props.type == 'name') ? sreachValue.value : '', // 物料名称
        number: props.type == 'number' ? sreachValue.value : '', // 物料编码
        barcode: props.type == 'barcode' ? sreachValue.value : '', // 条码
        assistant_id: props.brandName || [],//品牌
      },
    }

    // api
    const res = await customerPriceProductSelect({ ...data })

    // 遍历获取
    const list = res.data.list.map((item: any) => {
      // 复合查询
      if (!props.type) return { value: item.number, label: `${item.number}-${item.name}` }
      if (props.type == 'name') return { value: item.name, label: item.name }
      if (props.type == 'number') return { value: item.number, label: item.number }
    }) || []

    if (page.value == 1) selectOptions.value = [];

    selectOptions.value.push(...list);

    hasMore.value = selectOptions.value.length < res.data.count
  } catch (err) {
    console.error(err);
  } finally {
    loading.value = false;
  }
}, 500)



/**
 * 加载更多数据
 */
const handleLoadMore = async (value: any) => {
  page.value = value
  await loadDataList();
};

/**
 * 模糊搜索
 */
const handleQuerySearch = _.debounce((value: any) => {
  // 去空格 大小写
  sreachValue.value = value?.trim().toLowerCase().toLowerCase().replace(/\s+/g, '\n')
  page.value = 1
  // 加载数据
  loadDataList()
}, 500)

/**
 * change
 */
const handleQueryChange = (value: any) => {
  emit('LazyChange', value)
}
const visibleList = (va: any) => {
  if (va) {
    loadDataList()
  }
}
</script>

<style lang="scss" scoped></style>

